<template>
  <div id="bannertop">
    <div class="center">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../../../public/ycbimg/bt1img/1.png" alt>
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../../../public/ycbimg/bt1img/2.png" alt>
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../../../public/ycbimg/bt1img/3.png" alt>
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../../../public/ycbimg/bt1img/4.png" alt>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="comn">
        <ul>
          <li v-for="(item,index) in listarr" :key="index" @click="btn(item)">
            <div>
              <img :src="item.img" alt>
            </div>
            <p>
              <b>{{item.title}}</b>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  methods: {
    btn(item) {
      this.$router.push({
        path: "/comn",
        query: {
          id: item.id,
          title: item.title
        }
      });
    }
  },
  data() {
    return {
      listarr: [
        {
          id: "0",
          img: "/ycbimg/comn1 (1).png",
          title: "设计软件"
        },
        {
          id: "1",
          img: "/ycbimg/comn1 (2).png",
          title: "摄影修片"
        },
        {
          id: "2",
          img: "/ycbimg/comn1 (3).png",
          title: "手绘插画"
        },
        {
          id: "3",
          img: "/ycbimg/comn1 (4).png",
          title: "视频制作"
        },
        {
          id: "4",
          img: "/ycbimg/comn1 (5).png",
          title: "设计技能"
        }
      ]
    };
  }
};
</script>

<style scoped>
#bannertop {
  width: 100%;
  border-bottom: 0.01rem solid #fafafa;
}
.center {
  width: 3.45rem;
  height: 2.8rem;
  margin: auto;
}
.banner {
  width: 100%;
  height: 1.64rem;
}
.my-swipe {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.my-swipe .van-swipe-item {
  color: #fff;
  width: 100%;
  height: 100%;
  height: 1rem;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  float: left;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 1.64rem;
}
.comn {
  width: 100%;
  height: 1.16rem;
  position: relative;
}
.comn ul {
  width: 100%;
  height: 0.76rem;
  margin-top: 0.2rem;
  position: absolute;
}
.comn ul li {
  width: 20%;
  height: 100%;
  float: left;
}
.comn ul li div {
  width: 100%;
  height: 0.54rem;
  text-align: center;
}
.comn ul li div img {
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.06rem;
  margin-bottom: 0.06rem;
}
.comn ul li p {
  width: 100%;
  height: 0.24rem;
  line-height: 0.24rem;
  font-size: 0.12rem;
  text-align: center;
}
</style>
